<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>Bootstrap 101 Template</title>

	<!-- Bootstrap -->
	<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
	      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" rel="stylesheet">

	<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
	<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
	<!--[if lt IE 9]>
	<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
	<![endif]-->

	<style>

        #formS {
            display: flex;
            justify-content: space-evenly;
        }

        #ageS {
            line-height: 30px;
        }

        #tableS {
            margin-top: 100px;
            text-align: center;
        }

        #tableS th {
            text-align: center !important;
        }

        .label {
            user-select: none;
            cursor: pointer;
        }

        /* 遮罩层 */
        .cover {
            display: none;
            position: fixed;
            height: 100vh;
            width: 100vw;
            background-color: rgba(0, 0, 0, 0.7);
            top: 0;
            left: 0;
            z-index: 9999;
        }

        .warn {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 10000;
            width: 40%;
            height: 40%;
            background-color: #fefefe;
            transform: translate(-50%, -50%);
            border-radius: 6px;
            box-shadow: 0 0 10px #888;
            text-align: center;
        }

        #warnTop {
            position: fixed;
            top: 20px;
            width: 160px;
            right: 20px;
            /*display: none;*/
            transition: all .5s;
            opacity: 0;
        }

        #warnTop.show {
            top: 120px;
            opacity: 1;
        }

        .trInput {
            display: inline;
            width: 100px;
        }
	</style>
</head>
<body>


<div class="container ">


	<!--表单-->
	<nav class=" well navbar-default navbar-fixed-top ">
		<div class="container">
			<form class="form-inline" id="formS">
				<div class="form-group">
					<label for="name">姓名</label>
					<input class="form-control" id="name" placeholder="name" type="text" value="小高">
				</div>
				<div class="form-group">
					<label for="age">年龄</label>
					<input class="form-control" id="age" placeholder="age" type="number" value="13">
				</div>
				<div class="f radio" id="ageS">
					<label style="font-weight: 700;">性别</label>
					<div class="radio-inline">
						<label>
							<input checked id="genderMale" name="optionsRadios" type="radio" value="option1">
							男
						</label>
					</div>
					<div class="radio-inline">
						<label>
							<input id="genderFemale" name="optionsRadios" type="radio" value="option2">
							女
						</label>
					</div>

				</div>

				<button class="btn btn-primary" id="addBtn" type="button">添加</button>
			</form>
		</div>
	</nav>

	<!--表格-->
	<table class="table table-striped table-hover table-bordered " id="tableS">
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th colspan="3">操作</th>
		</tr>
		<tr>
			<td>小明</td>
			<td>男</td>
			<td>18</td>
			<td><span class="label label-info">查看</span></td>
			<td><span class="label label-success">修改</span></td>
			<td><span class="label label-danger">删除</span></td>
		</tr>
		<tr>
			<td>小丽</td>
			<td>女</td>
			<td>18</td>
			<td><span class="label label-info">查看</span></td>
			<td><span class="label label-success">修改</span></td>
			<td><span class="label label-danger">删除</span></td>
		</tr>
		<tr>
			<td>小王</td>
			<td>男</td>
			<td>20</td>
			<td><span class="label label-info">查看</span></td>
			<td><span class="label label-success">修改</span></td>
			<td><span class="label label-danger">删除</span></td>
		</tr>

	</table>

</div>


<!--提示框-->

<div class="alert alert-dismissible alert-warning " id="warnTop" role="alert">
	<strong>删除成功!</strong>
</div>


<!--遮罩层-->
<div class="cover"></div>

<!--遮罩层中的提示框-->
<div class="jumbotron warn">
	<h2>个人信息</h2>
	<p>。。。</p>
	<p><a class="btn btn-primary btn-lg" href="#" id="cancelCover" role="button">确认</a></p>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script crossorigin="anonymous"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script crossorigin="anonymous"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>

    const nameInput = document.querySelector('#name');
    const ageInput = document.querySelector('#age');
    const genderMale = document.querySelector('#genderMale');
    const genderFemale = document.querySelector('#genderFemale');
    const addBtn = document.querySelector('#addBtn');
    const tbody = document.querySelector('#tableS>tbody');
    const well = document.querySelector('.well');
    const container = document.querySelector('.container');
    const cover = document.querySelector('.cover');
    const warn = document.querySelector('.warn');
    const cancelCover = document.querySelector('#cancelCover');
    const warnTop = document.querySelector('#warnTop');

    let changing = false;

    /**
     *
     * @param eventNode：操作事件的dom
     * @param showNode：被操作元素
     * @constructor
     */
    function Warning(eventNode, showNode, type, text) {
        this.eventNode = eventNode;
        this.showNode = showNode;
        this.type = type;
        this.text = text;
    }

    Warning.prototype.show = function () {
        this.showNode.className = `alert alert-dismissible alert-${this.type} show`;
        setTimeout(() => {
            this.showNode.className = `alert alert-dismissible alert-${this.type} `;
        }, 1000);
        this.showNode.firstElementChild.innerHTML = this.text;
    };

    const add = new Warning(addBtn, warnTop, 'info', '添加成功');

    // 点击添加按钮
    addBtn.onclick = function () {

        tbody.innerHTML += `<tr>
	<td>${nameInput.value}</td>
	<td>${genderMale.checked ? '男' : '女'}</td>
	<td>${ageInput.value}</td>
	<td><span class="label label-info">查看</span></td>
	<td><span class="label label-success">修改</span></td>
	<td><span class="label label-danger">删除</span></td>
	</tr>`;
        add.show();
    };

    // 表格中的操作（查看，修改，删除）
    tbody.onclick = function (e) {

        let content = e.target.parentElement.parentElement.children;
        let name = content[0].innerHTML;
        let gender = content[1].innerHTML;
        let age = content[2].innerHTML;


        if (e.target.innerHTML === '查看' && !changing) {
            cover.style.display = 'block';
            warn.style.display = 'block';
            console.log(warn.children);
            warn.children[1].innerHTML = `我是${name}，${gender}，今年${age}岁了。`;
        }
        else if (e.target.innerHTML === '修改') {

			// 变为确认
            e.target.innerHTML = '确认';
            e.target.className = 'label label-warning';

            // 禁用查看
            changing = true;

            // 修改
            let name = e.target.parentElement.parentElement.children[0].innerHTML;
            let gender = e.target.parentElement.parentElement.children[1].innerHTML;
            let age = e.target.parentElement.parentElement.children[2].innerHTML;

            e.target.parentElement.parentElement.children[0].innerHTML = `
<input type="text" class="form-control trInput" id="exampleInputName2" value="${name}">`;
            e.target.parentElement.parentElement.children[1].innerHTML =
                (gender === '女')
                    ? `<select class="form-control" ><option>男</option><option selected>女</option></select>`
                    : `<select class="form-control" ><option>男</option><option >女</option></select>`;
            e.target.parentElement.parentElement.children[2].innerHTML = `
<input type="number" class="form-control trInput" id="exampleInputName2"  value="${age}">`;

        }
        else if (e.target.innerHTML === '确认'){

            e.target.innerHTML = '修改';
            e.target.className = 'label label-success';

            changing = false;

            let name = e.target.parentElement.parentElement.children[0].firstElementChild;
            let gender = e.target.parentElement.parentElement.children[1].firstElementChild;
            let age = e.target.parentElement.parentElement.children[2].firstElementChild;

            e.target.parentElement.parentElement.children[0].innerHTML = name.value
            e.target.parentElement.parentElement.children[1].innerHTML = gender.selectedIndex?'女':'男';
            e.target.parentElement.parentElement.children[2].innerHTML = age.value

            let change = new Warning(e.target, warnTop, 'success', '修改成功');
            change.show();

        }
        else if (e.target.innerHTML === '删除') {
            let rm = new Warning(e.target, warnTop, 'danger', '删除成功');
            rm.show();
            e.target.parentElement.parentElement.remove();
        }


    };

    // 取消遮罩层
    cancelCover.onclick = function () {
        cover.style.display = 'none';
        warn.style.display = 'none';
    };

    document.addEventListener('mousewheel',fn);
    document.addEventListener('DOMMouseScroll',fn);

    function fn(){
        console.log(1);
        // return false;
    }

</script>


</body>
</html>